<template>
    <div>
        <div v-for="item in CompanyList" :key="item.recruitId" class="Company-item" @click="toJobDetails(item.recruitId)">
            <div class="position">{{ item.recruitName }}</div>
            <div class="salary">{{ item.wage }}</div>
            <div class="education">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xueshimao"></use>
                </svg>
                {{ item.education }}
            </div>
            <div class="activity_1">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction1 }}
            </div>
            <div class="activity_2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction2 }}
            </div>
            <div class="name">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang"></use>
                </svg>
                {{ item.companyName }}
            </div>
            <div class="type">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gongwenbao"></use>
                </svg>
                {{ item.companyType }}
            </div>
            <div class="city">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang1"></use>
                </svg>
                {{ item.companyCity }}
            </div>
            <div class="uninterested">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiaxingshoucangtianchong"></use>
                </svg>
                <el-button type="text" @click.stop="uninterested(item.recruitId)">取消收藏</el-button>
            </div>
        </div>
        <div class="page">
            <el-pagination layout="prev, pager, next" :total="700" :current-page="currentPage"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js';
export default {
    data() {
        return {
            needPage: 1,
            currentPage: 1,
            CompanyList: [
                {

                },
                {

                },
                {

                },
                {

                },
            ],
        }
    },
    created() {
        axios.get(`/seekers/interested/${this.$store.state.account}/1`,
            {


            },
        )
            .then(response => {
                this.$data.CompanyList = response.data.data;
            })
            .catch(error => {
                console.log(error);
            })
    },
    methods: {
        toJobDetails(Id) {
            this.$store.commit('ChangeIsCompanyToSeeker')
            this.$store.commit('updateRecruitId', Id)
            this.$router.push('JobDetails')
        },
        uninterested(Id) {
            this.$confirm('是否取消收藏?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {//此处将该取消收藏的岗位Id传给后端，让后端删除该岗位，并刷新页面
                axios.delete(`seekers/interested/${this.$store.state.account}/${Id}`

                ).then(res => {
                    axios.get(`/seekers/interested/${this.$store.state.account}/${this.needPage}`,
                        {

                        },
                        {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }
                    )
                    .then(response => {
                        this.$data.CompanyList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    })
                })
                this.$message({

                    type: 'success',
                    message: '取消收藏成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        handlePageChange(currentPage) {
            this.needPage = currentPage;
            axios.defaults.withCredentials = true;
            axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
            axios.defaults.crossDomain = true;
            console.log(this.needPage);
            axios.get(`/seekers/interested/${this.$store.state.account}/${this.needPage}`,
                {

                },
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            )
                .then(response => {
                    this.$data.CompanyList = response.data.data;
                })
                .catch(error => {
                    console.log(error);
                })
        }


    }
}
</script>
<style scoped>
.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}

.Company-item {
    position: relative;
    width: 75%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-radius: 30px;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out;
}

.Company-item:hover {

    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.Company-item:hover .position {
    color: rgb(0, 180, 179);
}

.position {
    position: absolute;
    left: 40px;
    font-weight: 700;
    font-size: 22px;
    transition: color, 0.2s ease-in-out;
}

.salary {
    position: absolute;
    top: 5px;
    left: 200px;
    font-weight: 600;
    color: #ff0000;
    font-size: 20px;
}

.education {
    position: absolute;
    top: 60px;
    left: 50px;
}

.activity_1 {
    position: absolute;
    top: 60px;
    left: 200px;

}

.activity_2 {
    position: absolute;
    top: 60px;
    left: 420px;
}

.name {
    position: absolute;
    top: 120px;
    left: 50px;
}

.type {
    position: absolute;
    top: 120px;
    left: 420px;
}

.city {
    position: absolute;
    top: 120px;
    left: 650px;
}

.uninterested {
    position: absolute;
    top: 60px;
    right: 100px;
    color: #ff0000;
    transition: transform 0.5s ease-in-out 0.2s;
}

.uninterested:hover {
    transform: scale(1.1);
}

.page {
    margin-top: 30px;
}
</style>